<template>
  <div class="ordersList">

    <div class="content">
      <el-row>
        <el-breadcrumb separator="/">
          <el-breadcrumb-item>客户列表</el-breadcrumb-item>

        </el-breadcrumb>

      </el-row>
      <el-row :gutter="12">
        <!--todo 响应式-->
        <el-col :span="8">

          <el-select @change="query" style="width:100px" size="small" v-model="vm.query.intention_level" placeholder="意向等级">
            <el-option label="全部意向" value=""></el-option>
            <el-option label="H" value="h"></el-option>
            <el-option label="A" value="a"></el-option>
            <el-option label="B" value="b"></el-option>
            <el-option label="C" value="c"></el-option>

          </el-select>
          <el-select @change="query" style="width:100px" size="small" v-model="vm.query.shop_id" placeholder="选择店铺">
            <el-option
              key=""
              label="全部店铺"
              value="">
            </el-option>

            <el-option
              v-for="item in shops"
              :key="item.id"
              :label="item.shop_name"
              :value="item.id">
            </el-option>

          </el-select>
        </el-col>
        <el-col :span="8">
          <el-input
            size="small"
            placeholder="输入关键词"
            v-model="vm.query.keyword"
            prefix-icon="el-icon-search"
            @change="query({reload:true})"
            class="input-with-select">
            <el-button
              size="small"

              @click="vm.query.keyword='',query({reload:true})"
              slot="append"
            >清除
            </el-button>

          </el-input>
        </el-col>
        <el-col :span="3" :offset="5">


        </el-col>
      </el-row>

      <el-table
        :data="vm.models" stripe border style="width: 100%">


        <el-table-column

          prop="id"
          label="#"
          width="60">
        </el-table-column>

        <el-table-column
          label="客户头像"
          width="80"
        >
          <template slot-scope="scope">
            <span><img width="60px" :src="scope.row.avatar" alt=""> </span>

          </template>
        </el-table-column>
        <el-table-column
         prop="name"
          label="客户姓名"
          >
        </el-table-column>
          <el-table-column
         prop="phone"
          label="客户电话"
          >

        </el-table-column>
          <el-table-column
         prop="intention_level"
          label="意向等级"
          >

            <template slot-scope="scope">
              <span v-if="scope.row.intention_level=='h'">H</span>
              <span v-if="scope.row.intention_level=='a'">A</span>
              <span v-if="scope.row.intention_level=='b'">B</span>
              <span v-if="scope.row.intention_level=='c'">C</span>
              <span v-if="!scope.row.intention_level">-</span>


            </template>
        </el-table-column>
          <el-table-column
        prop="shop_name"
        label="所属店铺"
      >

      </el-table-column>
        <el-table-column
          prop="sales_name"
          label="销售顾问"
        >

        </el-table-column>
        <el-table-column
          prop="sales_phone"
          label="销售电话"
        >

        </el-table-column>
          <el-table-column
         prop="model_name"
          label="当前意向车型"
          >

        </el-table-column>

        <el-table-column
          label="操作"
          >
      <template slot-scope="scope">

          <router-link :to="{ name:'customsEdit',params: { id: scope.row.id }}" append>
             <el-button type="primary" size="mini">

                详情
              </el-button>
            </router-link>
      </template>
        </el-table-column>

      </el-table>
      <el-pagination
        background
        v-if="!vm.isLoading"
        @size-change="sizeChange($event)"
        @current-change="pageChange($event)"
        :page-size="vm.meta.size"
        :page-sizes="[10,20,30,50,100,1000]"
        :current-page="vm.meta.page"
        layout="total,sizes,prev, pager, next,jumper"
        :total="vm.meta.total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
//  todo 增加路由的参数,配置html5Mode ,导航方法封装
  import Vue from 'vue'
  import * as Models from '@/api/customs'
  import * as Shops from '@/api/shops'
import pages from '@/mixins/pages'

  export default{
    name: "threadsList",
    mixins: [pages],
    computed: {

    },

    components: {

    },
    data(){
      return{
        vm:{
          models:[],
          isNull:false,
          isLoading:false,
          isError:false,
          meta:{},
          query:{}
        },
        shops: [],
        Models
      }
    },
    computed:{},
    mounted() {

      this.query({reload:true})
      Shops.query().then((res) => {
        this.shops = res.models;
      })
    },
    methods: {


      reset: function () {
        this.vm.query.page=1;
        this.vm.query.size = 10;
        this.vm.query.intention_level = '';
        this.vm.query.shop_id = '';

      },


    }

  }
</script>
